import React from "react";
import { List, Toast } from "antd-mobile";
import {
    like,
    unlike,
    removeAudio,
    getDeviceSn,
    getShowDuration,
    getUuid,
} from "../utils.js";
import { FAVORITE_CATEGORY_ID} from '../config';

// images
import IconRemotePlay from "../images/remote_play.png";
import IconAdd from "../images/add.png";
import IconCheck from "../images/checked.png";
import Iconlike from "../images/like.png";
import IconUnlike from "../images/unlike.png";

const Item = List.Item;
const styles = {
    root: { width: "100%", height: "48px", display: "flex" },
    header: { alignItems: "center", justifyContent: "center", display: "flex", width: "42px", height: "100%" },
    content: { marginLeft: 10, width: "65%", height: "100%" },
    duration: {
        width: "80px",
        color: "#888",
        fontSize: "12px",
        display: "flex",
    },

}

// 音频播放
class AudioItem extends React.Component {

    constructor(props, context) {
        super(props, context);
        this.handleStoreAudio = this.handleStoreAudio.bind(this);

        const audio = this.props.audio;
        const index = this.props.index;
        const categoryId = this.props.categoryId;
        const hiddenRight = this.props.hiddenRight;
        this.state = {
            audio: audio,
            index: index,
            categoryId: categoryId,
            hiddenRight:hiddenRight
        };
        this.quotiety = document.documentElement.clientWidth * (hiddenRight ? 0.7 : 0.6);

    }

    componentWillReceiveProps(nextProps) {
        if (nextProps.audio.audio_id !== this.state.audio.audio_id) {
            this.setState({
                audio: nextProps.audio,
                index: nextProps.index
            });
        }
    }

    isAlreadyBind() {
        if (getDeviceSn()) {
            return true;
        }
        Toast.show("未绑定设备", 2, false);
        return false;
    }

    // 点播
    handleRemotePlay = () => {
        if (this.isAlreadyBind()) {
            this.props.handleRemotePlay(this.state.audio);
        }
    }

    // 收藏音频
    handleStoreAudio() {
        if (this.isAlreadyBind()) {
            const { is_like, audio_id } = this.state.audio;
            if (is_like === 1) {
                // 取消喜欢
                unlike(audio_id,FAVORITE_CATEGORY_ID, (result) => {
                    if (result.errcode === 0) {
                        this.setState({
                            audio: Object.assign(this.state.audio, { is_like: null })
                        });
                    }
                })
            } else {  // 喜欢
                like(audio_id,FAVORITE_CATEGORY_ID, (result) => {
                    if (result.errcode === 0) {
                        this.setState({
                            audio: Object.assign(this.state.audio, { is_like: 1 })
                        })
                    }
                });
            }
        }
    }


    /**
     * 添加或删除资源
     */
    handleAddAudio() {
        if (this.isAlreadyBind()) {
            const { uuid, audio_id,store_category_id } = this.state.audio;
            console.log(`移除:`,this.state.audio);
            if (uuid === getUuid()) {
                // 从列表中移除
                removeAudio(audio_id,store_category_id, (result) => {
                    if (result.errcode === 0) {
                        this.setState({
                            audio: Object.assign(this.state.audio, {uuid: null})
                        });
                        this.props.checkStoreState();
                    }
                });
            } else {
                this.props.handleAdd({index:this.state.index,audio:this.state.audio});
            }
        }
    }

    /**
     * 右侧添加视图
     */
    rightAddView = () => {
        const hasAdd = this.state.audio.store_category_id  && getUuid() === this.state.audio.uuid;
        return (
            <div style={{ display: "flex", justifyContent: 'center', alignItems: 'center', width: "48px"}}
                onClick={this.handleAddAudio.bind(this)}>
                <img src={hasAdd ? IconCheck : IconAdd} alt="" style={{ width: "20px",marginLeft:"12px"}}/>
            </div>
        )
    }

    // 右侧收藏视图
    rightStoreView = () => {
        return (
            <div
                style={{ display: "flex", justifyContent: 'center', alignItems: 'center', width: "48px" }}
                onClick={this.handleStoreAudio}>
                <img src={this.state.audio.is_like === 1 ? Iconlike : IconUnlike} style={{ width: "20px" }} alt="" />
            </div>
        )
    }

    render() {

        return (
            <div style={{ background: "white" }}>
                <Item
                    onClick={() => console.log("")} >
                    <div style={styles.root}>
                        <div style={styles.header} onClick={this.handleRemotePlay}>
                            <img src={IconRemotePlay} style={{ width: '24px', height: '24px', }} alt='' />
                        </div>
                        <div style={styles.content} onClick={this.handleRemotePlay}>
                            <p style={{
                                width: this.quotiety,
                                marginRight: 16,
                                paddingBottom: 0,
                                marginBottom: 3,
                                color: "#000",
                                fontSize: "14px",
                                marginTop: 5,
                                overflow: "hidden",
                                textOverflow: "ellipsis",
                                whiteSpace: "nowrap",
                            }}>{this.props.index + 1 + " " + this.props.audio.name}</p>
                            <span style={styles.duration}> {getShowDuration(this.props.audio.duration)}</span>
                        </div>
                        {
                            !this.state.hiddenRight  && this.rightStoreView()
                        }
                        {
                            !this.state.hiddenRight && this.rightAddView()
                        }
                    </div>
                </Item>
            </div >
        );
    }
}

export default AudioItem;



